import Base from "../base.js";
import StudentsApi from "../../api/students.js";
import Images from "./images.js";

export default class extends Base {
    constructor(props) {
        super(props)
        this.data = {
            student: {
                name: 1,
                sex: 1,
                age: 1,
                tel: 1,
                email: 1,
                city: 1,
                classId: 1
            },
            classes: []
        };
    }
    handle() {
        this.$addbtn.on("click", async e => {
            const data = await StudentsApi.addstu(this.data.student);
            alert("添加成功！");
            location.hash = `#/info/student-imgs/${data._id}`;

        });
        this.$input.on("input", e => {
            const ele = $(e.target);
            const key = ele.attr("name");
            this.data.student[key] = ele.val();
        });
        this.$sel.on("change", e => {
            this.data.student[$(e.target).attr("name")] = $(e.target).val();
            console.log(this.data.student);
        });
    }
    async mounted() {
        this.getClasses();
    }
    async getClasses() {
        this.data.classes = await StudentsApi.getClasses();
        this.data.student.classId = this.data.classes[0]._id;
        this.rerender();
    }
    rerender() {
        this.$sel.html(`
            ${this.data.classes.map(item => `<option value="${item._id}">${item.name}</option>`).join("")
            }`).val(this.data.student.classId);
    }
    render() {
        this.$el.html(`
        <table class="stuinfo">
            <tbody>
                <tr>
                    <th>姓名</th>
                    <td><input type="text" name="name" value="${this.data.student.name}"></td>
                </tr>
                <tr>
                    <th>年龄</th>
                    <td><input type="text" name="age" value="${this.data.student.age}"></td>
                </tr>
                <tr>
                    <th>性别</th>
                    <td><input type="text" name="sex" value="${this.data.student.sex}"></td>
                </tr>
                <tr>
                    <th>电话</th>
                    <td><input type="text" name="tel" value="${this.data.student.tel}"></td>
                </tr>
                <tr>
                    <th>邮箱</th>
                    <td><input type="text" name="email" value="${this.data.student.email}"></td>
                </tr>
                <tr>
                    <th>家庭地址</th>
                    <td><input type="text" name="city" value="${this.data.student.city}"></td>
                </tr>
                <tr>
                    <th>班级</th>
                    <td><select name="classId" id="" class="classId"></select></td>
                </tr>
            </tbody>
        </table>
        <div>
            <button class="add-btn">添加学生</button>
        </div>
        `);
        this.$input = $(".stuinfo input");
        this.$addbtn = $(".add-btn");
        this.$sel = $(".classId");
    }
}